<style lang="scss" scoped>
.dialog__footer {
  padding: 20px;
  height: 68px;
  display: flex;
justify-content:space-between;
}

.syd-dialog-container {
  ::v-deep .el-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tips {
      width: 100%;
      padding: 7px;
      border-radius: 3px;
      background-color: #fff2e6;

      color: #111;

      .icon {
        font-size: 16px;
        color: #FFA033;
      }
    }

  }
}
</style>

<template>
  <el-dialog
    top=""
    :title="title"
    :show-close="showClose"
    :visible.sync="showDialog"
    :width="size !== SYD_DIALOG_SIZE.FULLSCREEN ? `${width}px` : ''"
    :append-to-body="true"
    :fullscreen="size === SYD_DIALOG_SIZE.FULLSCREEN"
    class="syd-dialog-container"
    @close="$emit('close')"
  >
    <div class="syd-dialog">
      <div
        class="dialog__body"
        :style="size !== SYD_DIALOG_SIZE.FULLSCREEN ? { height: `${height - 112}px` } : {}"
      >
        <div v-show="tips" class="content">
          <div class="tips">
            <svg-icon icon-class="warning" class="icon" />
            <span>
              <slot name="tips" />
            </span>
          </div>
        </div>

        <slot />
      </div>
      <div
        slot="footer"
        class="dialog__footer"
      >
        <slot name="footer" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import { SYD_DIALOG_SIZE } from '@/enums'

export default {
  props: {

    visible: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    size: {
      type: [String, Object],
      default: SYD_DIALOG_SIZE.MEDIUM
    },

    title: {
      type: String,
      default: ''
    },

    tips: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showDialog: this.visible,
      width: 600,
      height: 360,

      SYD_DIALOG_SIZE
    }
  },

  watch: {
    visible() {
      this.showDialog = this.visible
    }
  },

  created() {
    if (_.isString(this.size)) {
      // 弹框大小
      switch (this.size) {
        case SYD_DIALOG_SIZE.SMALL:
          this.width = 600
          this.height = 360
          break

        case SYD_DIALOG_SIZE.MEDIUM:
          this.width = 600
          this.height = 360
          break

        case SYD_DIALOG_SIZE.LARGE:
          this.width = 1000
          this.height = 600
          break
      }

    // 指定大小
    } else {
      this.width = _.get(this.size, 'width', 600)
      this.height = _.get(this.size, 'height', 360)
    }
  },

  DIALOG_SIZE: SYD_DIALOG_SIZE
}
</script>
